<template>
  <qc-query-form
    :query-column="queryColumns"
    :query-param="queryParam"
    @search="search"
  ></qc-query-form>
  <div class="mt16">
    <qc-page-table
      ref="dictionaryTypeTableRef"
      :columns="columns"
      :loadData="loadData"
      :rowKey="(record) => record[primaryKey]"
    >
      <template #toolbarTitle>
        <span> {{ t("org.dictionary-type.dictionaryTypeTableTitle") }} </span>
      </template>
      <template #toolbarButton>
        <qc-add-button @click="addButtonClick"></qc-add-button>
        <qc-delete-button @click="deleteButtonClick"></qc-delete-button>
      </template>
      <template #customCodeItemId="{ text, record }">
        <qc-link :url="dictionaryEditPageUrl + record[primaryKey]">
          {{ text }}
        </qc-link>
      </template>
    </qc-page-table>
  </div>
  <a-modal v-if="showModal" v-model:visible="showModal" @ok="handleOk">
    <template #title> {{ modalTitle }} </template>
    <dictionary-type-form
      ref="dictionaryTypeFormRef"
      @submit-success="submitSuccess"
      :layout="modalLayout"
    ></dictionary-type-form>
  </a-modal>
</template>
<script lang='ts'>
import { useI18n } from "vue-i18n";
import { defineComponent, onMounted, reactive, ref, toRefs } from "vue";
import DictionaryTypeForm from "./dictionary-type-form.vue";
import dictionaryTypeApi from "/@/api/org/dictionary-type";
import { useModelPageTable } from "/@/kit/model-kit";
import {
  dictionaryTypeTableColumns,
  dictionaryTypeQueryColumns,
  dictionaryEditPageUrl,
} from "/@/views/org/dictionary-type/interface";
export default defineComponent({
  name: "DictionaryTypeTable",
  components: {
    DictionaryTypeForm,
  },
  setup() {
    const { t } = useI18n();
    const dictionaryTypeTableRef = ref(null);
    const dictionaryTypeFormRef = ref(null);
    const queryParam = {};
    const {
      primaryKey,
      loadData,
      searchTable,
      reloadTable,
      deleteSelectData,
    } = useModelPageTable(
      dictionaryTypeTableRef,
      dictionaryTypeApi,
      queryParam
    );
    const dictionaryTypeState = reactive({
      dictionaryEditPageUrl,
      columns: dictionaryTypeTableColumns,
      primaryKey,
      //查询
      queryColumns: dictionaryTypeQueryColumns,
      queryParam,
      loadData,
      search: () => reloadTable(),
      addButtonClick: () => {
        dictionaryTypeState.showModal = true;
      },
      deleteButtonClick: () => deleteSelectData(),
      ////////弹窗
      showModal: false,
      modalLayout: {
        labelCol: { span: 6 },
        wrapperCol: { span: 16 },
      },
      modalTitle: t("org.dictionary-type.addDictionaryTypeTitle"),
      handleOk: () => dictionaryTypeFormRef.value.onSubmit(),
      submitSuccess: () => {
        dictionaryTypeState.showModal = false;
        reloadTable();
      },
    });
    onMounted(() => searchTable());
    return {
      t,
      dictionaryTypeTableRef,
      dictionaryTypeFormRef,
      ...toRefs(dictionaryTypeState),
    };
  },
});
</script>
<style lang='less' scoped>
</style>